<!DOCTYPE html>
<html lang="en"xmlns:th="https://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<div th:replace="common/common::html"></div>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script th:inline="javascript">
        var _gridWidth = null;
        var _gridHeight = null;
        //页面自适应
        function resizePageSize(){
            _gridWidth = $(window).width()-12;/*  -189 是去掉左侧 菜单的宽度，   -12 是防止浏览器缩小页面 出现滚动条 恢复页面时  折行的问题 */
            _gridHeight = $(window).height()-32-75; /* -32 顶部主菜单高度，   -140 查询条件高度*/
        }

        $(function () {
            window.addEventListener("resize",function () {
                resizePageSize();
                $("#flexgrid-share-id").flexResize(_gridWidth,_gridHeight)
            })
            resizePageSize();

            var _columnWidth = (_gridWidth - 150)/6;
            $("#flexgrid-share-id").flexigrid({
                width : _gridWidth,
                height : _gridHeight,
                url : /*[[@{queryShareListByPage}]]*/"",
                dataType : 'json',
                colModel : [
                    {display : 'fileUuid',name : 'fileUuid',width : 150,sortable : false,align : 'center',hide : 'true'},
                    {display : /*[[#{share.name}]]*/"",name : 'shareName',width : _columnWidth, sortable : true,align : 'center'},
                    {display : /*[[#{share.timeon}]]*/"",name : 'startTime',width : _columnWidth, sortable : true,align : 'center'},
                    {display :  /*[[#{share.end.time}]]*/"",name : 'endTime',width : _columnWidth, sortable : true,align : 'center'},
                    {display :  /*[[#{share.src}]]*/"",name : 'src',width : _columnWidth, sortable : true,align : 'center'},
                    {display :  /*[[#{common.operation}]]*/"",name : 'fileUuid',width : _columnWidth, sortable : true,align : 'center',
                        process: function(v,_trid,_row) {
                            var contents = "";
                            //文件删除
                            contents += '<a class="btn title=[[#{file.delete}]] onclick="deteleFile(\'' + v + '\')"> <i class="glyphicon glyphicon-trash"></i> </a>';
                            return contents;
                        }},
                ],
                resizable : false, //resizable table是否可伸缩
                useRp : true,
                usepager : true, //是否分页
                autoload : false, //自动加载，即第一次发起ajax请求
                hideOnSubmit : true, //是否在回调时显示遮盖
                showcheckbox : true, //是否显示多选框
                //rowhandler : rowDbclick, //是否启用行的扩展事情功能,在生成行时绑定事件，如双击，右键等
                rowbinddata : true

            });
            query();
            //初始化查询条件
            $("#nav-tool-article-id").searchTools({
                colModel : [
                    {display : /*[[#{share.name}]]*/"",domId:"search-share-name"}
                ],
                reback:function () {
                    query();
                }
            });
            //查询按钮
            $("#query-share-btn-id").click(function () {
                query();
            });


            //初始化删除对话框
            $("#delete-file-dialog-id").dialog({
                autoOpen : false,
                width : 600,
                modal : true,
                resizable : false,
                title: /*[[#{file.delete.dialog}]]*/'',
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',
                        click: function() {
                            var fileUuid = $("#delete-file-dialog-id").attr("fileUuid");
                            $.ajax({
                                type:'post',
                                async:false,
                                dataType:'json',
                                url: /*[[@{deleteFile}]]*/'',
                                data:[
                                    {name:"fileUuid",value:fileUuid}
                                ],
                                success:function (data) {
                                    message(data.msg);
                                    $("#delete-file-dialog-id").dialog('close')
                                    query();
                                },
                                error: function (msg){
                                    message(/*[[#{common.error}]]*/'');
                                }
                            });
                            $( this ).dialog( "close" );
                        }
                    },
                    {
                        text: /*[[#{common.cancel}]]*/'',
                        click: function() {
                            $( this ).dialog( "close" );
                        }
                    }
                ]
            });

        });//ready

        function query() {
            var shareName = $("#search-share-name").attr("select-value");
            $("#flexgrid-share-id").flexOptions({
                extParam:[
                    {name:"shareName",value:shareName}
                ]
            }).flexReload();
        }

        //删除文件
        function deteleFile(fileUuid) {
            $("#delete-file-dialog-id").attr("fileUuid",fileUuid);
            $("#delete-file-dialog-id").dialog('open');
        };

    </script>
</head>
<body style="display: flex;flex-direction: column;">
<nav style="flex-basis: 31px;display: flex;flex-direction: row;margin:5px 0">
    <article id="nav-tool-article-id" class="nav-tools-article"></article>
    <nav style="flex-grow: 1">
        <a id="query-share-btn-id" class="btn" th:title="#{common.query}">
            <i class="glyphicon glyphicon-search"></i>
        </a>
    </nav>
</nav>
<table id="flexgrid-share-id" ></table>
<div id="file-dialog-id" style="display: none">
</div>
<!--删除文件-->
<div id="delete-file-dialog-id" style="display: none">
    <div class="form-group">
        <p>是否删除</p>
    </div>
</div>
</body>
</html>